<template>
    <view class="content">
        <template>
            <view id="myPlayer" ref="myPlayer"></view>
        </template>
    </view>
</template>
<script>
//https://huaweicloud.csdn.net/64eea5156ffa50202576170b.html
//npm install flv.js
import flvjs from 'flv.js';
export default {
    data() {
        return {
            enableProgressGesture: false,
            autoplay: true,
            showPlayBtn: false,
            showCenterPlayBtn: false,
            showFullscreenBtn: false,
            controls: true,
            windowWidth: '',
            windowHeight: '',
            flvPlayer: null,
            player: null,
        };
    },
    onLoad() {
        this.$nextTick(() => {
            this.getLivePlayer();
        });
    },
	onShow() {
	      if (this.player) {
	        this.flv_start();
	       }
	    },
	onHide() {
	  if (this.player) {
		this.flv_pause();
	  }
	},
    methods: {
        getLivePlayer() {
            uni.showLoading({
                mask: true,
                title: 'loading...'
            });
            // 生成需要的video 组件
            // var player = document.getElementById('videoElement');
            var player = document.createElement('video');
            player.id = 'video';
            player.style = 'width: 100%;height: 211px';
            player.enableProgressGesture = this.enableProgressGesture;
            player.controls = this.controls;
            player.muted = true;
            player.showCenterPlayBtn = this.showCenterPlayBtn;
            player.showPlayBtn = this.showPlayBtn;
            player.showFullscreenBtn = this.showFullscreenBtn;
            player.x5VideoPlayerType = 'h5-page';
            player.x5VideoPlayerFullscreen = 'false';
            player.autoplay = this.autoplay; // 以上均为 video标签的属性配置
            document.getElementById('myPlayer').appendChild(player);
            console.log(player);
            console.log(flvjs.isSupported());
            if (flvjs.isSupported()) {
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true, //<====直播的话，加个这个
                    url: 'http://www.prositech.cn/2109A/lihgang.flv'//直播流地址
                });
                this.flvPlayer.attachMediaElement(player);
                this.flvPlayer.load(); //加载
                
                setTimeout(() => {
                    var player2 = document.createElement('video');
                    player2.play();
                }, 2000);
                this.player = player;
                this.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
                    console.log('播放错误');
                    this.flv_destroy();
                    
                });
                uni.hideLoading();
            }
        },
        flv_start() {
            //开始
            console.log(this.player);
            this.player.play();
        },
        flv_pause() {
            //暂停
            this.player.pause();
        },
        flv_destroy() {
            //停止
            this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
            this.player.destroy();
            this.player = null;
        },
        flv_seekto() {
            // 复制其他人的  我还没用这个
            this.player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
        }
    }
};
</script>
<style>
</style>